import { useRef, useEffect, useState } from 'react'
import { useInViewport } from 'ahooks'

/** 没有用,ref无效 */
export const useSwiperPageStatus = ({ isActive = false }: { isActive: boolean }) => {
    const ref = useRef<HTMLDivElement>(null)

    /** 当前Page是否显示在视窗内 */
    const [isPageInViewport, setIsPageInViewport] = useState<boolean>(false)

    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })

    useEffect(() => {
        if (isActive && inViewport) {
            setIsPageInViewport(true)
        } else {
            setIsPageInViewport(false)
        }

        console.log('isActive => ', isActive)
        console.log('inViewport => ', inViewport)
    }, [isActive, inViewport])

    return {
        ref,
        isPageInViewport,
    } as const
}
